<template>
  <a-layout class="layout">
    <a-layout-header>
      <LogoHeader />
    </a-layout-header>
    <a-layout-content style="padding: 0 50px">
      <a-breadcrumb>
        <a-breadcrumb-item href="">
          <home-outlined />
        </a-breadcrumb-item>
        <a-breadcrumb-item href="">
          <user-outlined />
          <span>管理员</span>
        </a-breadcrumb-item>
        <a-breadcrumb-item>
          {{ name }}
        </a-breadcrumb-item>
        <a-breadcrumb-item> 欢迎使用本系统！</a-breadcrumb-item>
      </a-breadcrumb>
      <div :style="{ background: '#fff', padding: '24px', minHeight: '280px' }">
        <CurState />
        <div>
          <a-tabs @change="onTabChange">
            <a-tab-pane key="1" tab="管理员">
              <AdminTable />
            </a-tab-pane>
            <a-tab-pane key="2" tab="工作人员">
              <OfficerTable />
            </a-tab-pane>
            <a-tab-pane key="3" tab="普通师生">
              <StuffTable />
            </a-tab-pane>
            <a-tab-pane key="4" tab="借用记录">
              <LendTable />
            </a-tab-pane>
            <a-tab-pane key="5" tab="用户信息管理">
              <UserPanel />
            </a-tab-pane>
          </a-tabs>
        </div>
      </div>
    </a-layout-content>
    <a-layout-footer style="text-align: center">
      CopyLeft 2020 Created with ❤
    </a-layout-footer>
  </a-layout>
</template>
<script lang="ts">
import { defineComponent, ref, computed } from "vue";
import LogoHeader from "@/components/LogoHeader.vue";
import { HomeOutlined, UserOutlined } from "@ant-design/icons-vue";
import { useStore } from "vuex";
import { myPost, BASE_URL, Response } from "@/utils/request";
import { message } from "ant-design-vue";
import UserPanel from "@/components/UserPanel.vue";
import LendTable from "@/components/Admin/LendTable.vue";
import AdminTable from "@/components/Admin/AdminTable.vue";
import OfficerTable from "@/components/Admin/OfficerTable.vue";
import StuffTable from "@/components/Admin/StuffTable.vue";
import CurState from "@/components/Officer/CurState.vue";

export default defineComponent({
  components: {
    LogoHeader: LogoHeader,
    UserPanel: UserPanel,
    CurState: CurState,
    LendTable,
    AdminTable,
    OfficerTable,
    StuffTable,
    HomeOutlined,
    UserOutlined
  },
  emits: ["update-cur-state-officer"],
  setup() {
    const store = useStore();
    const name = computed(() => {
      const temp = store.getters.name;
      if (temp === "" || !temp) {
        return "未登录";
      } else {
        return temp;
      }
    });
    const curState = ref("");

    let respBody = {
      isSuccess: false,
      msg: "",
      data: []
    };
    const hasBorrow = computed(() => store.getters.hasBorrow);

    function error(): void {
      const msg = respBody["msg"];
      message.error({ content: msg, duration: 2 });
      setTimeout(() => {
        return;
      }, 1000);
    }

    function queryBorrow() {
      myPost(BASE_URL + "/stuff/queryBorrowFrom", {
        stuffId: store.getters.id
      }).then((resp: Response) => {
        respBody = resp.data;
        if (respBody["isSuccess"]) {
          curState.value = "当前您" + respBody["msg"];
          if (respBody.data.length > 0) {
            store.commit("comfirmBorrow");
          }
        } else {
          curState.value = "错误！";
          error();
        }
      });
    }

    function onTabChange() {
      queryBorrow();
    }

    const log = console.log;

    queryBorrow();

    return {
      name,
      curState,
      hasBorrow,
      onTabChange,
      log
    };
  }
});
</script>
<style scoped>
.layout {
  height: 100%;
}
</style>
